<template>
  <view class="page-container">
    <view class="record-list">
      <view v-if="recordList.length === 0 && !loading" class="empty-state">
        <text>暂无申请记录</text>
      </view>
      
      <view v-for="item in recordList" :key="item.id" class="record-card" >
        <view class="card-header">
          <text class="package-name">{{ item.packageName }}</text>
          <text :class="['status-tag', getStatusClass(item.serviceStatus)]">{{ getStatus(item.serviceStatus) }}</text>
        </view>

        <view class="card-body">
          <view class="info-row">
            <text class="label">姓       名：</text>
            <text class="value">{{ item.name }}</text>
          </view>
          <view class="info-row">
            <text class="label">主治医生：</text>
            <text class="value">{{ item.doctorName || '待分配' }}</text>
          </view>
          <view class="info-row">
            <text class="label">地       址：</text>
            <text class="value">{{ item.address }}</text>
          </view>
          <view class="info-row">
            <text class="label">具体情况：</text>
            <text class="value">{{ item.serviceItem}}</text>
          </view>
          <view class="divider"></view>
          <view class="info-row">
            <text class="label">申请日期：</text>
            <text class="value">{{ item.applyDate }}</text>
          </view>
          <view class="info-row" v-if="item.auditTime">
            <text class="label">审核日期：</text>
            <text class="value">{{ item.auditTime}}</text>
          </view>
          <view class="info-row" v-if="item.finishTime">
            <text class="label">完成日期：</text>
            <text class="value">{{ item.finishTime}}</text>
          </view>
        </view>
      </view>
      
      <view v-if="loading" class="loading-state">
        <text>加载中...</text>
      </view>
    </view>
  </view>
</template>

<script>
import UniSegmentedControl from "../../uni_modules/uni-segmented-control/components/uni-segmented-control/uni-segmented-control.vue";
import {queryResidentProfile} from "../../api/metrices";
import {mapState} from 'vuex';
import {queryRecordByResidentId} from "../../api/service";
	
export default {
	name: "myApplication",
  computed:{
    ...mapState({
      //用户信息
      user:state => state.userInfo
    })
  },
  data() {
    return {
      loading: false, // 控制加载状态的显示
      recordList: [
        {
          id: 1,
          name: '张三',
          packageName: '高血压慢病管理套餐',
          serviceStatus: 1,
          address:'',
          serviceItem:'',
          applyDate: '2025-08-15',
          auditTime: '2025-08-16',
          finishTime: '2025-08-16',
          doctorName: '王医生'
        }
      ] // 申请记录列表
    };
  },
  onLoad() {
    // 页面加载时，获取申请记录数据
    this.fetchRecords();
  },
  // 监听下拉刷新
  onPullDownRefresh() {
    console.log('下拉刷新');
    this.fetchRecords();
  },
  methods: {
    async fetchRecords() {
      this.loading = true;
      let {data:data} = await queryRecordByResidentId(this.user.residentId)
      this.recordList = data.data;
      this.loading = false;
      uni.stopPullDownRefresh();
    },
    getStatusClass(status) {
      switch (status) {
        case 1:
          return 'status-pending';
        case 2:
          return 'status-serving';
        case 3:
          return 'status-completed';
        case 4:
          return 'status-rejected';
        default:
          return 'status-default';
      }
    },
    getStatus(status){
      switch (status) {
        case 1:
          return '审核中';
        case 2:
          return '待服务';
        case 3:
          return '已完成';
        case 4:
          return '已取消';
      }
    },
  }
}
</script>

<style scoped>
/* 页面容器 */
.page-container {
  background-color: #f5f5f5;
  min-height: 100vh;
  padding: 24rpx;
  box-sizing: border-box;
}

/* 记录卡片 */
.record-card {
  background-color: #ffffff;
  border-radius: 16rpx;
  margin-bottom: 24rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
  overflow: hidden;
}

/* 卡片头部 */
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 28rpx 32rpx;
  border-bottom: 1rpx solid #eeeeee;
}

.package-name {
  font-size: 32rpx;
  font-weight: bold;
  color: #333333;
}

/* 状态标签通用样式 */
.status-tag {
  font-size: 24rpx;
  padding: 8rpx 16rpx;
  border-radius: 8rpx;
  color: #ffffff;
}

/* 不同状态的颜色 */
.status-pending { background-color: #ff9900; } /* 审核中 - 橙色 */
.status-serving { background-color: #007aff; } /* 服务中 - 蓝色 */
.status-completed { background-color: #4cd964; } /* 已完成 - 绿色 */
.status-rejected { background-color: #8e8e93; } /* 已驳回 - 灰色 */
.status-default { background-color: #c7c7cc; }

/* 卡片主体 */
.card-body {
  padding: 28rpx 32rpx;
}

.info-row {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
  font-size: 28rpx;
}
.info-row:last-child {
  margin-bottom: 0;
}

.label {
  color: #888888;
  width: 160rpx; /* 固定宽度，方便对齐 */
}

.value {
  color: #333333;
  flex: 1;
}

/* 分割线 */
.divider {
  height: 1rpx;
  background-color: #eeeeee;
  margin: 20rpx 0;
}

/* 空状态和加载中 */
.empty-state, .loading-state {
  text-align: center;
  color: #999999;
  padding-top: 200rpx;
}
</style>